<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>资讯详情</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="../fonts/xianwang/iconfont.css" />
		<link rel="stylesheet" href="../../css/iconfont.css" />
		<style>
			.mui-bar-nav.mui-bar .mui-icon {
				margin-right: 0;
			}
			
			.mui-slider-item img {
				height: 150px;
			}
			
			.article-content div {
				display: inline-block;
				overflow: hidden;
				padding: 5px;
				width: 100%;
			}
			
			.article-content div img {
				width: 40px;
				height: 40px;
				border-radius: 50px;
				float: left;
			}
			
			.article-content div span {
				float: left;
				margin: 8px 0 0 10px;
				font-size: 20px;
			}
			
			h5 {
				color: black;
				border-left: 2px solid red;
				border-bottom: 1px solid #bbb;
				margin-left: 10px;
				padding: 4px;
			}
			
			.hot-comment {
				overflow: hidden;
				margin: 10px;
			}
			
			.hot-comment div {
				display: inline-block;
			}
			
			.comment-img {
				float: left;
				margin: 5px;
			}
			
			.comment-img img {
				width: 40px;
				height: 40px;
				border-radius: 50px;
			}
			
			.comment-content {
				float: left;
				width: 80%;
			}
			
			.comment-content p {
				display: inline-block;
				border-bottom: 1px solid #bbbbbba8;
				padding-bottom: 5px;
			}
			
			.comment-content div span {
				font-size: 12px;
				color: slategray;
			}
			
			.comment-content div h6,
			.comment-content p {
				color: #000000;
			}
			
			p img {
				width: 100%;
			}
			
			[v-cloak] {
				display: none;
			}
		</style>
	</head>

	<body>
		<div id="app" v-cloak>
			<!--1.顶部收藏-->
			<header class="mui-bar mui-bar-nav">
				<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
				<h1 class="mui-title">资讯详情</h1>
				<span class="mui-icon iconfont icon-fenxiang mui-pull-right shareButton"></span>
				<span class="mui-icon iconfont icon-shoucang1 mui-pull-right Collection" v-if="isconsultation==null||isconsultation==''"></span>
				<span class="mui-icon iconfont icon-shoucang mui-pull-right cancel" v-else></span>
			</header>
			<!--3.底部输入框-->
			<nav class="mui-bar mui-bar-tab">
				<a href="#Hot" class="mui-icon mui-icon-chat" style="width: 10%;padding-left: 5px;color:#6C6C6C;"></a>
				<input style="width: 70%;height: 32px;vertical-align: top;margin-top: 2%;" id="consult">
				<button style="border: none; margin-top: 2%;margin-left: 5px;background-color: #7ECDF4;color: #FFFFFF;" id="send">发送</button>
			</nav>
			<!--1.顶部收藏结束-->

			<!--2.中部内容-->
			<div class="mui-content">
				<!--图片和标题-->
				<div class="mui-slider">
					<div class="mui-slider-group">
						<div class="mui-slider-item">
							<a href="#">
								<!--<img :src="artucleData.firstImg">
								<p class="mui-slider-title" style="color: white;">{{artucleData.title}}</p>-->
								<!--<img src="../../img/a.jpg">-->
								<img :src="seeWhat">
								<p class="mui-slider-title" style="color: white;">上班中···</p>
								<!--咨询的id-->
								<input type="hidden" :value="artucleData.id" />
							</a>
						</div>
					</div>
				</div>
				<!--图片和标题结束-->
				<!--文章内容-->
				<div class="article-content" style="padding-left: 5px;padding-right: 5px;">
					<div>
						<!--<img :src="artucleData.state" /><span>{{artucleData.browsingVolume}}</span>-->
						<img src="../../img/b.jpg" /><span>阿阿萨德撒</span>
					</div>
					<p style="padding: 5px;margin: 0;" v-html="artucleData.content">
						<div>dafdfdddsfsdfds似懂非懂发送到发送到水电费防守打法是的撒大问问问如果太惹眼退热贴太热太热太热太热太热太热太热太热他</div>
						<a>dafdfdddsfsdfds</a>
						<p>dafdfdddsfsdfds</p>
						<p>dafdfdddsfsdfds</p>
						<p>dafdfdddsfsdfds</p>
						<p>dafdfdddsfsdfds</p>
						<p>dafdfdddsfsdfds</p>
						<p>dafdfdddsfsdfds</p>
					</p>
				</div>
				<!--文章内容结束-->
				<!--热门评论-->
				<h5 id="Hot">热门评论</h5>
				<div class="hot-comment" v-if="Hottest==''" style="text-align: center;font-size: 12px;">
					暂无评论
				</div>
				<div class="hot-comment" v-else v-for="HottestData in Hottest">
					<div class="comment-img"><img :src="HottestData.seleFace" alt="城市" /></div>
					<div class="comment-content">
						<div style="width: 100%;">
							<div>
								<h6>{{HottestData.userName}}</h6>
								<span>{{HottestData.floor}}楼</span>
								<span>{{HottestData.timehour}}小时前</span>
							</div>
							<div style="float: right;">
								<div v-if="HottestData.id!=undefined">
									<h6 class="mui-icon iconfont icon-dianzan mui-pull-right "></h6>
									<h6>{{HottestData.likes}}</h6>
								</div>
								<div v-else class="likes" :data-id="HottestData.coId">
									<h6 class="mui-icon iconfont icon-dianzan1 mui-pull-right"></h6>
									<h6>{{HottestData.likes}}</h6>
								</div>

							</div>
						</div>
						<p>{{HottestData.content}}</p>
					</div>
				</div>
				<!--全部评论-->
				<h5>全部评论</h5>
				<div class="hot-comment" v-if="Hottest==''" style="text-align: center;font-size: 12px;">
					暂无评论
				</div>
				<div class="hot-comment" v-else v-for="AllData in All">
					<div class="comment-img"><img :src="AllData.seleFace" alt="城市" /></div>
					<div class="comment-content">
						<div style="width: 100%;">
							<div>
								<h6>{{AllData.userName}}</h6>
								<span>{{AllData.floor}}楼</span>
								<span>{{AllData.timehour}}小时前</span>
							</div>
							<div style="float: right;">
								<div v-if="AllData.id!=undefined">
									<h6 class="mui-icon iconfont icon-dianzan mui-pull-right "></h6>
									<h6>{{AllData.likes}}</h6>
								</div>
								<div v-else class="likes" :data-id="AllData.coId">
									<h6 class="mui-icon iconfont icon-dianzan1 mui-pull-right"></h6>
									<h6>{{AllData.likes}}</h6>
								</div>
							</div>
						</div>
						<p>{{AllData.content}}</p>
					</div>
				</div>
			</div>
			<!--2.中部内容结束-->
		</div>
		<!--3.底部输入框结束-->
		<script type="text/javascript" src="../../js/jquery.min.js"></script>
		<script src="../../js/mui.min.js"></script>
		<script src="../../js/vue.min.js"></script>
		<script type="text/javascript" src="../js/api.js"></script>
		<script>
			mui.init();
			
		</script>
		<script>
			window.addEventListener('refresh1', function(e) { //执行刷新
				location.reload();
			});
			new Vue({
				el: '#app',
				data: {
					artucleData: {}, //页面咨询数据
					Hottest: [], //最热咨询
					All: [], //全部咨询
					isconsultation: {}, //用户是否收藏
					_user: {},
					_consultationId: '',
					seeWhat:''
				},
				mounted: function() {
					this.muidata();

				},
				methods: {
					/*mui初始化*/
					muidata: function() {
						mui.init();
						var vm = this;
						mui.plusReady(function() {
			             	var web = plus.webview.currentWebview();
			                var benefit_id = web.name;
			                var benefit_list_id = web.name1;
			                var game_newsImg_id = web.game_newsImg_id;
			                var game_list_id = web.game_list_id;
			                alert("game_list_id==:"+game_list_id);
			                if (benefit_id) {
			                	mui.getJSON("../../json/benefitPlay_detail.json",function(data){
				                	alert(data.nearByAtv[0].nearImg);
				                	vm.seeWhat = data.nearByAtv[0].nearImg;
				                })
			                }
			                if (benefit_list_id) {
			                	console.log("benefit_list_id=:"+benefit_list_id);
			                	mui.getJSON("../../json/benefitPlay_detail.json",function(data){
				                	alert(data.seeWhat[0].thing_img);
				                	vm.seeWhat = data.seeWhat[0].thing_img;
				                })
			                }
			                if (game_newsImg_id) {
			                	console.log("benefit_list_id=:"+game_newsImg_id);
			                	mui.getJSON("../../json/benefitPlay_detail.json",function(data){
				                	alert(data.seeWhat[1].thing_img);
				                	vm.seeWhat = data.seeWhat[1].thing_img;
				                })
			                }
			                if (game_list_id) {
			                	console.log("game_list_id=:"+game_list_id);
			                	mui.getJSON("../../json/benefitPlay_detail.json",function(data){
				                	alert(data.seeWhat[2].thing_img);
				                	vm.seeWhat = data.seeWhat[2].thing_img;
				                })
			                }
			                
			                
							vm._consultationId = self.consultationId; //获得参数
							//							console.log("_consultationId="+_consultationId);
							//vm.dataArtucle(_consultationId)
							//点击点赞功能
							vm._user = JSON.parse(localStorage.getItem("$users"));
							var mask = mui.createMask(); //遮罩层
							// 更新分享服务
							plus.share.getServices(function(s) {
								shares = {};
								for(var i in s) {
									var t = s[i];
									shares[t.id] = t;
								}
							}, function(e) {
								mui.toast("无享服务！");
								//console.log("获取分享服务列表失败：" + e.message);
							});
							/*点赞*/
							$("body").on("tap", ".likes", function() {
								var id = $(this).attr("data-id");
								vm._user = JSON.parse(localStorage.getItem("$users"));
								if(vm._user == null) {
									var btnArray = ['跳转登录', '取消'];
									mui.confirm('是否登录', '登录', btnArray, function(e) {
										if(e.index == 0) {
											mui.openWindow({
												url: "../login.html",
											});
										}
									});
								} else {
									$.ajax({
										type: 'post',
										url: HangUrl + 'rest/ConsultationInfoApp/Likes',
										data: {
											coId: id,
											userId: vm._user.id
										},
										timeout: 5 * 1000,
										dataType: 'json',
										async: false,
										beforeSend: function() {
											plus.nativeUI.showWaiting("加载中.....", {
												padlock: true
											});
											mask.show(); //显示遮罩层
										},
										complete: function() {
											plus.nativeUI.closeWaiting();
											mask.close(); //关闭遮罩层
										},
										success: function(data, textStatus) {
											if(data.success) {
												//												console.log("成功");
												//												location.reload();
												vm.dataArtucle();
												if(vm._user.id != null) {
													integrateDayRecord(vm._user.id, vm.artucleData.id);
												}
											} else {
												mui.toast(data.message, {
													duration: 'long',
													type: 'div'
												})
											}
										}
									});
								}
							})
							//分享
							$("body").on("tap", ".shareButton", function() {
								vm._user = JSON.parse(localStorage.getItem("$users"));
								if(vm.artucleData != {}) {
									var $content = vm.artucleData.content;
									var $content1 = $content.replace(/<[^>]+>/g,"");
									var s = $content1.replace(/&nbsp;/g,"");
									appshare({
										'title': vm.artucleData.title,
//										'href': 'http://www.goplayvip.com',
										'href': 'http://192.168.1.104:8080/drinkShare.html',
										'desc': s,
										'pic': vm.artucleData.firstImg
									}, true);
									if(vm._user != null) {
										integrateDayRecord(vm._user.id, vm.artucleData.id);
									}
								} else {
									plus.nativeUI.toast("请等待数据加载完成后再分享！");
								}
							})

							//点击发送
							$("body").on("tap", "#send", function() {
								var _connten = $("#consult").val();
								vm._user = JSON.parse(localStorage.getItem("$users"));
								if(vm._user == null) {
									var btnArray = ['跳转登录', '取消'];
									mui.confirm('是否登录', '登录', btnArray, function(e) {
										if(e.index == 0) {
											mui.openWindow({
												url: "../login.html",
											});
										}
									});
								} else {
									if(_connten == null || _connten == "") {
										mui.toast("请填写内容", {
											duration: 'long',
											type: 'div'
										})
									} else {
										$.ajax({
											type: 'post',
											url: HangUrl + 'rest/ConsultationInfoApp/ReleaseComments',
											data: {
												consultationId: vm._consultationId,
												userId: vm._user.id,
												conent: _connten
											},
											timeout: 5 * 1000,
											dataType: 'json',
											async: false,
											beforeSend: function() {
												plus.nativeUI.showWaiting("加载中.....", {
													padlock: true
												});
												mask.show(); //显示遮罩层
											},
											complete: function() {
												plus.nativeUI.closeWaiting();
												mask.close(); //关闭遮罩层
											},
											success: function(data, textStatus) {
												if(data.success) {
													//													console.log("成功");
													//													location.reload();
													vm.dataArtucle();
												} else {
													mui.toast(data.message, {
														duration: 'long',
														type: 'div'
													})
												}
											}
										});
									}
								}
							});

							//点击收藏文章
							$("body").on("tap", ".Collection", function() {
								vm._user = JSON.parse(localStorage.getItem("$users"));
								if(vm._user == null) {
									var btnArray = ['跳转登录', '取消'];
									mui.confirm('是否登录', '登录', btnArray, function(e) {
										if(e.index == 0) {
											mui.openWindow({
												url: "../login.html",
											});
										}
									});
								} else {
									$.ajax({
										type: 'post',
										url: HangUrl + 'rest/ConsultationInfoApp/Article',
										data: {
											articleId: vm._consultationId,
											userId: vm._user.id
										},
										timeout: 5 * 1000,
										dataType: 'json',
										async: true,
										beforeSend: function() {
											plus.nativeUI.showWaiting("加载中.....", {
												padlock: true
											});
											mask.show(); //显示遮罩层
										},
										complete: function() {
											plus.nativeUI.closeWaiting();
											mask.close(); //关闭遮罩层
										},
										success: function(result, textStatus) {
											if(result.success) {
												//												location.reload();
												vm.dataArtucle();
												mui.toast("收藏成功");
											} else {
												mui.toast(result.message, {
													duration: 'long',
													type: 'div'
												})
											}
										}
									});
								}
							});
							//取消收藏
							$("body").on("tap", ".cancel", function() {
								$.ajax({
									type: 'post',
									url: HangUrl + 'rest/ConsultationInfoApp/cancel',
									data: {
										articleId: vm._consultationId,
										userId: vm._user.id
									},
									timeout: 5 * 1000,
									dataType: 'json',
									async: true,
									beforeSend: function() {
										plus.nativeUI.showWaiting("加载中.....", {
											padlock: true
										});
										mask.show(); //显示遮罩层
									},
									complete: function() {
										plus.nativeUI.closeWaiting();
										mask.close(); //关闭遮罩层
									},
									success: function(result, textStatus) {
										if(result.success) {
											//												location.reload();
											vm.dataArtucle();
											mui.toast("取消成功");
										} else {
											mui.toast(result.message, {
												duration: 'long',
												type: 'div'
											})
										}
									}
								});
							});
							vm.dataArtucle();
						});

					},
					//加载数据
					dataArtucle: function() {
						var vm = this;
						var mask = mui.createMask(); //遮罩层
						//默认加载页面数据
						if(vm._user == null) {
							$.ajax({
								type: 'post',
								url: HangUrl + 'rest/ConsultationInfoApp/ConsultationIDUserImg',
								data: {
									ConsultationID: vm._consultationId
								},
								timeout: 5 * 1000,
								dataType: 'json',
								async: true,
								beforeSend: function() {
									plus.nativeUI.showWaiting("加载中.....", {
										padlock: true
									});
									mask.show(); //显示遮罩层
								},
								complete: function() {
									plus.nativeUI.closeWaiting();
									mask.close(); //关闭遮罩层
								},
								success: function(result, textStatus) {
									if(result) {
										vm.artucleData = result.consultationInfo;
										vm.Hottest = result.Hottest;
										vm.All = result.All;
										vm.isconsultation = result.articleCollection;
										//console.log("成功");
									}
								}
							});
						} else {
							$.ajax({
								type: 'post',
								url: HangUrl + 'rest/ConsultationInfoApp/ConsultationIDUserImg',
								data: {
									ConsultationID: vm._consultationId,
									userId: vm._user.id
								},
								timeout: 5 * 1000,
								dataType: 'json',
								async: true,
								beforeSend: function() {
									plus.nativeUI.showWaiting("加载中.....", {
										padlock: true
									});
									mask.show(); //显示遮罩层
								},
								complete: function() {
									plus.nativeUI.closeWaiting();
									mask.close(); //关闭遮罩层
								},
								success: function(result, textStatus) {
									if(result) {
										vm.artucleData = result.consultationInfo;
										vm.Hottest = result.Hottest;
										vm.All = result.All;
										vm.isconsultation = result.articleCollection;
										//console.log("成功");
									}
								}
							});
						}
					}
				},
			});
			//用户登录获取积分
			function integrateDayRecord(userId, id) {
				var postData = {
					userId: userId,
					state: 2,
					id: id
				}
				mui.ajax(HangUrl + 'rest/integrateController/dayRecord', {
					data: postData,
					dataType: 'json', //服务器返回json格式数据
					type: 'post', //HTTP请求类型
					timeout: 5000, //超时时间设置为10秒；         
					success: function(data) {
						console.log("登录奖励积分");
					},
					error: function(xhr, type, errorThrown) {
						//异常处理；
						console.log(type);
					}
				});
			}
			
			var appshare = function(msgdata, ishref) {
				// 分享参数
				if(ishref) {
					var msginfo = {
						title: msgdata.title,
						href: msgdata.href,
						content: msgdata.desc,
						pic: msgdata.pic
					};
				} else {
					var msginfo = {
						content: msgdata.desc
					};
				}

				var shareBts = [];
				// 更新分享列表
				var ss = shares['weixin'];
				ss && ss.nativeClient && (shareBts.push({
					title: '微信朋友圈',
					s: ss,
					x: 'WXSceneTimeline'
				}), shareBts.push({
					title: '微信好友',
					s: ss,
					x: 'WXSceneSession'
				}));

				ss = shares['qq'];
				ss && ss.nativeClient && shareBts.push({
					title: 'QQ',
					s: ss
				});

				if(!ishref) {
					ss = shares['sinaweibo'];
					ss && shareBts.push({
						title: '新浪微博',
						s: ss
					});
				}

				// 弹出分享列表
				shareBts.length > 0 ? plus.nativeUI.actionSheet({
						title: '分享',
						cancel: '取消',
						buttons: shareBts
					},
					function(e) {
						(e.index > 0) && shareAction(shareBts[e.index - 1], ishref, msginfo);
					}
				) : plus.nativeUI.alert('当前环境无法支持分享操作!');
			}
			

			function shareAction(sb, ishref, msginfo) {
				if(!sb || !sb.s) {
					mui.toast("无效的分享服务！");
					return;
				}
				var msg = {
					content: msginfo.content,
					extra: {
						scene: sb.x
					}
				};
				if(ishref) {
					msg.title = msginfo.title;
					msg.href = msginfo.href;
					msg.content = msginfo.content;
					msg.thumbs = [msginfo.pic];
					msg.pictures = [msginfo.pic];
				}
				// 发送分享
				if(sb.s.authenticated) {
					console.log("---已授权---");
					shareMessage(msg, sb.s);
				} else {
					console.log("---未授权---");
					sb.s.authorize(function() {
						shareMessage(msg, sb.s);
					}, function(e) {
						console.log("认证授权失败：" + e.code + " - " + e.message);
					});
				}
			}
			
			function shareMessage(msg, s) {
				s.send(
					msg,
					function() {
						mui.toast("分享到\"" + s.description + "\"成功！ ");
					},
					function(e) {
						mui.toast("分享到\"" + s.description + "\"失败！ ");
						// console.log("分享到\"" + s.description + "\"失败: " + JSON.stringify(e));
					}
				);
			}
		</script>
	</body>

</html>